"use strict";
var canvas = document.getElementById('bg-canvas'),
  ctx = canvas.getContext('2d'),
  w = canvas.width = window.innerWidth,
  h = canvas.height = window.innerHeight + 200,

  hue = 217,
  stars = [],
  count = 0,
  maxStars = 1300; //星星数量

var canvas2 = document.createElement('canvas'),
  ctx2 = canvas2.getContext('2d');
canvas2.width = 100;
canvas2.height = 100;
var half = canvas2.width / 2,
  gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.025, '#CCC');
gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
gradient2.addColorStop(1, 'transparent');

ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half, 0, Math.PI * 2);
ctx2.fill();

// End cache

function random(min, max) {
  if (arguments.length < 2) {
    max = min;
    min = 0;
  }

  if (min > max) {
    var hold = max;
    max = min;
    min = hold;
  }

  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function maxOrbit(x, y) {
  var max = Math.max(x, y),
    diameter = Math.round(Math.sqrt(max * max + max * max));
  return diameter / 2;
  //星星移动范围，值越大范围越小，
}

var Star = function() {

  this.orbitRadius = random(maxOrbit(w, h));
  this.radius = random(60, this.orbitRadius) / 8;
  //星星大小
  this.orbitX = w / 2;
  this.orbitY = h / 2;
  this.timePassed = random(0, maxStars);
  this.speed = random(this.orbitRadius) / 50000;
  //星星移动速度
  this.alpha = random(2, 10) / 10;

  count++;
  stars[count] = this;
}

Star.prototype.draw = function() {
  var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
    y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
    twinkle = random(10);

  if (twinkle === 1 && this.alpha > 0) {
    this.alpha -= 0.05;
  } else if (twinkle === 2 && this.alpha < 1) {
    this.alpha += 0.05;
  }

  ctx.globalAlpha = this.alpha;
  ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
  this.timePassed += this.speed;
}

for (var i = 0; i < maxStars; i++) {
  new Star();
}

function animation() {
  ctx.globalCompositeOperation = 'source-over';
  ctx.globalAlpha = 0.5; //尾巴
  ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
  ctx.fillRect(0, 0, w, h)

  ctx.globalCompositeOperation = 'lighter';
  for (var i = 1, l = stars.length; i < l; i++) {
    stars[i].draw();
  };

  window.requestAnimationFrame(animation);
}

animation();

$(function() {
  var oDiv = $(".scr-circle")[0];
  var aImg = oDiv.children;
  for (var i = 0; i < aImg.length; i++) {
    aImg[i].I = rndNum(-5, 5);
    if (aImg[i].I == 0) aImg[i].I = 1;
    aImg[i]._I = aImg[i].I;

    aImg[i].style.width = 100 + i * 20 + 'px';
    aImg[i].style.marginTop = -((100 + i * 20) / 2) + 'px';
    aImg[i].style.marginLeft = -((100 + i * 20) / 2) + 'px';
  }

  setInterval(function() {
    for (var i = 0; i < aImg.length; i++) {
      aImg[i].style.WebkitTransform = 'rotate(' + aImg[i].I + 'deg)';
      aImg[i].style.MozTransform = 'rotate(' + aImg[i].I + 'deg)';
      aImg[i].style.msTransform = 'rotate(' + aImg[i].I + 'deg)';
      aImg[i].I += aImg[i]._I;
      aImg[i].I %= 360;
    }
  }, 1000 / 30);

  function rndNum(m, n) {
    n++;
    return parseInt(Math.random() * (n - m) + m);
  }


  var iconli = $(".recruiter-li .icon");
  iconli.click(function() {
    event.stopPropagation();
    event.preventDefault();
    var indx = $(this).parent().parent().index();
    $($(".load-card-slot i").get(indx)).css({
      "display": "block"
    });
    $(".load-card-slot").animate({
      'opacity': 1,
      'width': '500px',
      'zIndex': '1000'
    }, 500, function() {
      var self = this;
      $($(".recruiter-part-list .recruiter-part-li").get(indx)).animate({
        'left': '50%',
        'opacity': '1'
      }, 500, function() {
        $($(".load-card-slot i").get(indx)).css({
          "display": "none"
        });
        $(self).css({
          'opacity': '0.5',
          'width': '90px',
          'zIndex': '0'
        });

      }).siblings().animate({
        'left': '200%',
        'opacity': '0'
      });
    });
  });
  $(".recruiter-part-list .recruiter-part-li").click(function(){
    event.stopPropagation();
    //event.preventDefault();
  });
  $(window).click(function() {
    $(".recruiter-part-list .recruiter-part-li").animate({
      'left': '200%',
      'opacity': '0'
    });
  });
});